/* 
    - 浏览器使用模块：
        - 不再是使用require引入模块；

        - 而是如： import 变量名 from "./header.js"
*/
// 把header.js这个模块导入到list.js中；
import header from "./header.js"; // 这是一个函数，需要调用；

let headerContainer = document.querySelector('.header .container');

// 需要把 header 的返回值（结构）插入到 .header .container 中；
headerContainer.innerHTML = header();



let userPhoto = document.querySelector('.userPhoto');
let login = document.querySelector('.login');
let register = document.querySelector('.register');
let out = document.querySelector('.out');
console.log(out)

login.onclick = function () {

    location.href = '../html/login-dialog.html';
};
register.onclick = function () {

    location.href = '../html/login-dialog.html';
};

out.onclick = function () {

    setCookie('user', -1);
    location.reload();
};

let user = getCookie('user');
if (!user) {
    login.style.display = 'block';
    register.style.display = 'block';
    userPhoto.style.display = 'none';
    out.style.display = 'none';
} else {
    login.style.display = 'none';
    register.style.display = 'none';
    userPhoto.style.display = 'block';
    out.style.display = 'block';
};




/* 
    - 设置导航列表信息（多次需要）；
*/
// 获取所需要的元素
let submenu = document.querySelector('.submenu div'); //二级导航
let nav_list = document.querySelector('.nav_list'); //分类的容器

let nav1_sub = document.querySelector('.nav1_sub'); //子类的容器；
// 这里的写法要注意， .nav1_sub 下面的 .nav_list；
let nav1_sub_list = nav1_sub.querySelector('.nav_list'); //子类的列表；

// 获取列表页元素
let list_content = document.querySelector('.list_content');




// 获取导航信息数据；
async function getNavInfo() {

    // json数据可以直接当成数据接口的形式通过ajax获取！！
    let res = await pAjax({
        url: '../data/nav.json'
    })
    // console.log(res);
    // 得到的是一个json数据,，这个数据包括了分类和子类，但是并不只是在获取到时就进行渲染，而且在每次点击时，都要根据最新获取的数据渲染分类和子类，所以可以将子类渲染的函数封装起来；

    // 把获取到的数据存储到本地存储中;
    localStorage.setItem('navInfo', res);
    // console.log(res);

    // 渲染分类；
    renderNav(JSON.parse(res));
};

getNavInfo();

// 渲染分类的函数；
function renderNav(data) {

    let str = data.map((item, index) => {

        /* 
            - 返回值需要进行判断
                1. 全部 是默认高亮的，利用三目运算符判断；
                2. 因为 全部 和 其他的分类不一样，全部 没有子类渲染；
                
            - 全部 是res的第一个数据，可以利用索引来判断 index == 0；

            - 自定义属性category是为了方便下面点击分类渲染子类 和 点击子类渲染子类数据；
        */
        return `<a category="${item.category}" class="${index == 0?"active":""} item">${item.name}</a>`;

    }).join('');

    submenu.innerHTML = str;
    nav_list.innerHTML = str;

    // 默认是把 全部 的子类传递给这个函数；
    // data[index].sub是子类；
    renderSonNav(data[0].sub);
};

// 渲染子类的函数；
function renderSonNav(sub_data) {

    // 如果data[index].sub.length为0，即其为空数组，就把nav1_sub隐藏；
    // 如果不是空数组，就显示nav1_sub，并且根据数据渲染生成a标签的结构插入到nav1_sub_list中；
    if (sub_data.length == 0) {
        nav1_sub.style.display = 'none';
        return;
    };

    nav1_sub.style.display = 'block';

    nav1_sub_list.innerHTML = sub_data.map(item => {
        return `<a sub_category=${item.sub_category} class="item">${item.name}</a>`;
    }).join('');

};

// 为每个分类绑定点击事件，利用事件委托；
// 点击某一个分类的时候，渲染其对应的子类；
nav_list.onclick = function (e) {
    e = event || window.event;
    // 但是这样点击到 .nav_list 时也会触发点击事件，所以可以利用classList.contains()来避免；
    if (!e.target.classList.contains('nav_list')) {

        // 为点击目标添加类名 active，并且移除其他目标的类名 active（高亮显示，开始默认是 全部 高亮）
        // 移除其他高亮显示，应该在点击一开始就移除所有的高亮显示，在添加点击目标的高亮显示；
        nav_list.querySelector('.active').classList.remove('active');
        e.target.classList.add('active');

        page(pagenation);

        // 获取所有数据，再过滤出点击的这个分类的元素（上面已经保存在localStorge中）
        let allData = JSON.parse(localStorage.getItem('navInfo'));

        let category = e.target.getAttribute('category');

        if (!category) {
            getListData();
            localStorage.removeItem('category');
            localStorage.removeItem('sub_category');

            let endData = allData.filter(item => {
                return item.category == category;
            });

            renderSonNav(endData[0].sub);
        } else {

            // 将分类的关键字 category 保存在本地中，后面点击子类渲染数据需要用到
            localStorage.setItem('category', category);


            // 根据category到allData中过滤出这个分类的元素
            let endData = allData.filter(item => {
                return item.category == category;
            });

            // 得到该元素后对 子类 进行渲染；
            // 配合76行代码；
            renderSonNav(endData[0].sub);


            // 点击分类时，获取分类的数据，把对应的数据渲染到列表页中；
            // 分类的数据是有参数的，看官网参数格式为 category=logo_brand&sub_category=logo_design
            // category=logo_brand 是 分类的
            // sub_category=logo_design 是 子类的

            getListData({
                category: category
            });
        }
    };
};

// 为每个子类绑定点击事件，利用事件委托；
// 点击某一个子类的时候，对应高亮更改；
nav1_sub_list.onclick = function (e) {
    e = event || window.event;
    if (e.target.classList.contains('item')) {
        // 先获取所有含有active高亮效果的子类；
        let active = nav1_sub_list.querySelector('.active');
        // 如果有那么就移除这些子类的高亮，没有则不会执行下面这句代码；
        active && active.classList.remove('active');
        // 最后给点击的子类添加高亮效果；
        e.target.classList.add('active');

        page(pagenation);


        // 点击子类 渲染对应数据
        // 关键字 category=logo_brand&sub_category=logo_design
        let category = localStorage.getItem('category');
        let sub_category = e.target.getAttribute('sub_category');

        // 又因为后面综合处理 分类 子类 和 页数 的时候，需要用到sub_category，所以也在点击到子类的时候将其储存到本地中；
        localStorage.setItem('sub_category', sub_category);

        // 传参
        getListData({
            category: category,
            sub_category: sub_category
        })
    };
};



/* 
    - ajax请求获取列表页的数据
*/
async function getListData(params) {

    let res = await pAjax({
        url: "https://muse.huaban.com/api/v1/services/",
        data: params
    });
    // console.log(res);
    let listData = JSON.parse(res);
    // console.log(listData)

    // 渲染列表数据
    renderList(listData);
}

getListData();

// 渲染列表数据的函数
function renderList(data) {

    // 渲染列表的结构
    /* 
        - img 的获取有点特殊，在item对象下的cover属性下的第一个对象中的key中，并且是拼接在前后固定的字符串中； 

        - price有两种情况：利用三目运算符判断
            + 第一种是 price=0
            + 第二种是 price不为0 —— 表示价格面议

        - 提供加急服务：
            + extra属性下面的urgent，如果有这个属性就表示可提供加急服务

        - 提供拓展服务：
            + extra属性下面的sub_services，如果有这个属性的值不是一个空数组，就表示可提供加急服务
    */
    let str = data.map(item => {

        let pStr;

        if (item.extra.urgent && item.extra.sub_services.length != 0) {
            pStr = '提供加急服务，提供可选拓展';
        };
        if (item.extra.urgent && item.extra.sub_services.length == 0) {
            pStr = '提供加急服务';
        };
        if (!item.extra.urgent && item.extra.sub_services.length != 0) {
            pStr = '提供可选拓展';
        };
        if (!item.extra.urgent && item.extra.sub_services.length == 0) {
            pStr = '';
        };

        return `<div class="item card" id="${item.service_id}">
        <img
            src="https://muse-img.huabanimg.com/${item.cover[0].key}_/both/280x280"
            alt=""
        />
        <label class="title">${item.name}</label>
        <footer class="extra">
            <label class="price">
                ${item.price == 0 ? '价格面议':'￥'+item.price+'<i style="font-size:14px">'+'/'+item.unit+'</i>'}
            </label>
            <p class="tip">${pStr}</p>
        </footer>
    </div>`
    }).join('');

    list_content.innerHTML = str;

    // 绑定点击事件，跳转到列表详情页
    skip();
}

// 点击列表卡片时，跳转到列表详情页，并且把id传递过去
function skip() {

    let cards = document.querySelectorAll('.card');
    // console.log(cards);

    for (let i = 0; i < cards.length; i++) {

        cards[i].onclick = function () {

            // 获取用户的id
            let id = this.getAttribute('id');

            // 点击跳转到用户详情页，并把id传递到参数
            location.href = `lists_details.html?id=${id}`;
        };
    };
};


let pagenation = document.querySelector(".pagenation");

function page(ppp) {

    new Pagenation(ppp, {
        pageInfo: {
            pagenum: 1,
            pagesize: 20,
            total: 1000,
            totalpage: 50,
        },
        textInfo: {
            first: "《",
            prev: "<",
            next: ">",
            last: "》",
        },

        // 这个分页函数存在一个问题，点击pagenation这个容器时也会触发
        async change(index) {
            // 点击分页的时候触发这个change函数
            // 这个函数有一个参数 表示当前的页数
            // 请求对应页数的数据并且再次渲染


            // 再次调用getListData(params)函数即可；
            // getListData({
            //     limit: 20,
            //     page: index
            // });

            // 综合处理 分类 子类 和 页数 的参数
            let category = localStorage.getItem('category');
            let sub_category = localStorage.getItem('sub_category');

            //https://muse.huaban.com/services/?category=logo_brand&limit=20&page=2&sub_category=business_card_brand
            let str = `${category?'category='+category:''}&limit=20&page=${index}&${sub_category?'sub_category='+sub_category:''}`;

            getListData(str);

            // 重新渲染数据时，滚动条回到顶部
            scrollTo({
                top: 0,
                behavior: 'smooth'
            });

        },
    });
};
page(pagenation);